import * as echarts from "echarts"


class EchartsThemeController {
    /**
     * 轴线公共样式
     * @param {*} contrastColor
     * @returns
     */
    axisCommon = contrastColor => ({
        axisLine: {
            lineStyle: {
                color: contrastColor
            }
        },
        axisTick: {
            lineStyle: {
                color: contrastColor
            }
        },
        axisLabel: {
            textStyle: {
                color: contrastColor
            }
        },
        splitLine: {
            lineStyle: {
                type: "dashed",
                color: "#aaa"
            }
        },
        splitArea: {
            areaStyle: {
                color: contrastColor
            }
        }
    });

    constructor(){
        this.echarts = echarts
        this.objectList = []
        // this.echarts.registerTheme("dark", this.theme);
    }


    /**
     * 初始化所有主题
     * @param {*} list
     */
    initThemeList = list => {
        list.forEach(item => {
            // 调色板
            const colorPalette = item.echartsColorPalette || ["#dd6b66","#759aa0","#e69d87","#8dc1a9","#ea7e53","#eedd78","#73a373","#73b9bc","#7289ab", "#91ca8c","#f49f42"]
            // 对比色
            const contrastColor = item.setting["@text-color"]
            // 背景色
            const backgroundColor = item.setting["@layout-body-background"]
            const theme = {
                color: colorPalette,
                backgroundColor,
                tooltip: {
                    axisPointer: {
                        lineStyle: {
                            color: contrastColor
                        },
                        crossStyle: {
                            color: contrastColor
                        }
                    }
                },
                legend: {
                    textStyle: {
                        color: contrastColor
                    }
                },
                textStyle: {
                    color: contrastColor
                },
                title: {
                    textStyle: {
                        color: contrastColor
                    }
                },
                toolbox: {
                    iconStyle: {
                        normal: {
                            borderColor: contrastColor
                        }
                    }
                },
                dataZoom: {
                    textStyle: {
                        color: contrastColor
                    }
                },
                timeline: {
                    lineStyle: {
                        color: contrastColor
                    },
                    itemStyle: {
                        normal: {
                            color: colorPalette[1]
                        }
                    },
                    label: {
                        normal: {
                            textStyle: {
                                color: contrastColor
                            }
                        }
                    },
                    controlStyle: {
                        normal: {
                            color: contrastColor,
                            borderColor: contrastColor
                        }
                    }
                },
                timeAxis: this.axisCommon(contrastColor),
                logAxis: this.axisCommon(contrastColor),
                valueAxis: this.axisCommon(contrastColor),
                categoryAxis: this.axisCommon(contrastColor),

                line: {
                    symbol: "circle"
                },
                graph: {
                    color: colorPalette
                },
                gauge: {
                    title: {
                        textStyle: {
                            color: contrastColor
                        }
                    }
                },
                candlestick: {
                    itemStyle: {
                        normal: {
                            color: "#FD1050",
                            color0: "#0CF49B",
                            borderColor: "#FD1050",
                            borderColor0: "#0CF49B"
                        }
                    }
                }
            }
            theme.categoryAxis.splitLine.show = false
            this.echarts.registerTheme(item.id, theme)
        })
    }

    /**
     * 为当前所有echarts实例设置主题
     * @param {*} styleId
     */
    setTheme = styleId => {
        this.objectList.forEach(item => {
            item.object.dispose()

            const myChart = echarts.init(document.getElementById(item.id), styleId)
            myChart.setOption(item.option, true)
            item.object = myChart
            item.onChange(myChart)
        })
    }
}

const echartThemeContrastColor = new EchartsThemeController()


export default echartThemeContrastColor
